<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>好友页面</title>
    <link rel="stylesheet" href="./css/friends.css">
    <link rel="stylesheet" href="./font-friends/iconfont.css">
</head>
<body>


    <div class="container">
        <div class="extra">
            <img class="user-icon" src="./favicon.ico">

            <div onclick="goToMessage()" class="iconfont icon-xiaoxi-1"></div>
            <div onclick="goToFriends()" class="green iconfont icon-icon_huabanfuben"></div>
<!--            <div style="position: relative;bottom: 4px" onclick="goToFriends()" class="iconfont icon-contact_bookaddress"></div>-->
            <div onclick="goToGroup()" class="iconfont icon-qunliao"></div>
            <div onclick="goToPyq()" class="iconfont icon-pengyouquan"></div>
        </div>
        <div id="user-list" class="left">


            <div class="search-div">
                <img style="position: absolute;left: 20px" src="./img/search.png">
                <input placeholder="搜索" onclick="resetInput(this)" oninput="searchFriend(this)" class="search-input">
                <img onclick="unsetInput(this.parentNode)" id="x" src="./img/x.png">
                <img onclick="addFriend(this.parentNode)" style="cursor: pointer;border-radius: 2px;padding: 1.5px;background-color: #eeeeee;width: 23px;height: fit-content" src="./img/addFriend.png">
            </div>
            <div class="search-friend">
                <img src="./img/friends.png">
                <input oninput="change1(this)" onclick="hiddenPlaceholder(this)" onblur="showPlaceholder(this)" placeholder="用户名">
                <div style="cursor: pointer" onclick="recover(this.parentNode)">取消</div>
            </div>


            <div style="align-items: center" class="user-item" onclick="showFriendRequest(this)">
                <img style="padding: 7px 5px 7px 9px;background-color: #f89c3c;width: 26px" class="user-avatar" src="./img/addhaoyou.png">
                <div class="user-name">新的朋友</div>
            </div>





            <div class="search-box user-item" style="background-color: white;align-items: center" onclick="doSearch()">
                <img style="border-radius: 5px;padding: 9px;background-color: #07bf60;width: 20px" class="user-avatar" src="./img/green_white_search.png">
                <div>
                    <span>添加：</span>
                    <span id="change1" style="color: #00c500"></span>
                </div>
            </div>

        </div>
        <div class="right">
            <div class="user-info">
                <div class="friend-info">
                    <img style="width: 60px;height: fit-content" src="./favicon.ico">
                    <div>
                        <div id="friend-name"></div>
                        <div style="font-size: 12px;color: #b9b9b9;display: flex">
                            <span>用户名：</span>
                            <span class="username"></span>
                        </div>
                    </div>
                </div>

                <div class="note-div">
                    <div style="font-size: 16px">备注</div>
                    <input onclick="changeTheInput(this)" onblur="restoreTheInput(this)" onkeydown="handleKeyDown(event,this)"  placeholder="点击添加备注">
                </div>
                <div onclick="chatWho(this.parentNode)" style="display: flex;flex-direction: column;align-items: center;cursor:pointer;">
                    <div style="margin-top: 30px;margin-bottom: 3px;color: #576b95" class="iconfont  icon-xiaoxi-1"></div>
                    <div style="font-size: 10px;color: #576b95">发消息</div>
                </div>
            </div>



            <div class="friend-request-list">
                <div class="request-head">
                    新的朋友
                </div>
<!--                <div class="friend-request-item">-->
<!--                    <img src="favicon.ico">-->
<!--                    <div>韩非雨</div>-->
<!--                    <div class="unaccepted">已添加</div>-->
<!--                </div>-->
<!--                <div class="friend-request-item">-->
<!--                    <img src="favicon.ico">-->
<!--                    <div>user1</div>-->
<!--                    <div class="accepted">接受</div>-->
<!--                </div>-->
<!--                <div class="friend-request-item">-->
<!--                    <img src="favicon.ico">-->
<!--                    <div>user1</div>-->
<!--                    <div class="unaccepted">已添加</div>-->
<!--                </div>-->

            </div>



        </div>
    </div>

    <div id="messageBox" class="message-box">不存在该用户</div>
</body>
</html>
<script src="./js/main.js"></script>
<script src="./js/friends.js"></script>
